<template>
	<view class="container">
		<view class="top_title">
			<view class="first_name" :class="activeName=='issue'?'active_name':''" @click="myIssue('issue')">
			我的发布
			</view>
			<view :class="activeName=='reply'?'active_name':''" @click="myIssue('reply')">
			我的回复
			</view>
		</view>
			<view class="" v-for="(item,index) in replyList" :key="index" class="reply_list">
				<view class="reply_left_part">
					<image :src="item.avatar" mode="" class="avartar"></image>
					<view class="name">
						<view class="">
					         {{item.name}}
						</view>	
						<view class="content">
					       {{item.content}}
						</view>
						<view class="reply_num">
					      <view class="">
					      	查看{{item.num}}条回复
					      </view>
						  <image src="../../static/img/detailInfo/back.png" mode="" class="more_btn"></image>
						</view>
					</view>
					
				</view>
				
				<view class="reply_right_part">
		           {{item.time}}
				</view>
			</view>
		
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeName:"reply",
				replyList: [{
						avatar: "../../static/img/detailInfo/detailImg.png",
						name: "云淡风轻",
						content: "好伤感啊！迷茫",
						num: 3,
						time: "今天18:32"
					},
					{
						avatar: "../../static/img/detailInfo/detailImg.png",
						name: "云淡风轻",
						content: "好伤感啊！迷茫",
						num: 3,
						time: "今天18:32"
					},
					{
						avatar: "../../static/img/detailInfo/detailImg.png",
						name: "云淡风轻",
						content: "好伤感啊！迷茫",
						num: 3,
						time: "今天18:32"
					}
				]
				
			}
		},
		methods: {
			myIssue(value){
				this.activeName = value
			}
		
			
			
		}
	}
</script>
<style>
	page {
		width: 100%;
		height: 100%;
		background-color: #fff;
	}
</style>

<style scoped>
	.container {
		width: 100%;
		height: 100%;
		margin-bottom: 50rpx;
	}
	
	.bottom_reply_list{
		margin-bottom: 230rpx;
	}
	.reply_list{
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1rpx solid #f6f6f6;
		padding: 0 25rpx;
		box-sizing: border-box;
		margin-top:20rpx;
	}
	.reply_list:last-child{
		border-bottom: none;
	}
	.reply_list .reply_left_part{
		display: flex;
	}
	.reply_list .reply_left_part .avartar{
		width: 86rpx;
		height: 86rpx;
		margin-right: 22rpx;
		border-radius: 50%;
	}
	.reply_list .reply_left_part .name{
		font-size: 28rpx;
		color: #333333;
		margin-bottom: 25rpx;
	}
	.reply_list .reply_left_part .content{
		font-size: 30rpx;
		color: #333333;
		margin-bottom: 25rpx;
	}
	.reply_list .reply_left_part .reply_num{
		font-size: 22rpx;
		color: #6B6969;
		display: flex;
		align-items: center;
	}
	.reply_list .reply_left_part .reply_num image{
		width: 10rpx;
		height: 18rpx;
		margin-left: 11rpx;
	}
	.reply_list .reply_right_part{
		font-size: 22rpx;
		color: #6B6969;
	}
	.top_title{
		display: flex;
		font-size: 32rpx;
		color: #333333;
		margin:0 24rpx;
		padding:30rpx 0;
		box-sizing: border-box;
		border-bottom: 1rpx solid #f6f6f6;
	}
	.active_name{
		color: #FB8408;
	}
	.first_name{
		margin-right: 48rpx;
	}

</style>
